import React,{Component} from 'react'
import axios from 'axios'

export default class Search extends Component{

  search = ()=>{
    //连续解构赋值+重命名
    const {keyWordElement:{value:data}} = this

    //发送请求前，通知App更新状态
    this.props.updataAppState({isFirst:false,isLoading:true})

    //此处是访问github提供是API接口，是借助cros解决跨域问题
    // axios.get(`https://api.github.com/search/user?q=${data}`).then(
    //   response => {},
    //   error => {}
    // )

    //此处是借助服务器文件写的跨域获取数据，“http://localhost:3000”是本地地址，是可以省略的
    axios.get(`/api1/search/users?q=${data}`).then(
      response => {
        // 请求成功后，通知App更新状态
        this.props.updataAppState({isLoading:false,users:response.data.items})
      },
      error => {
        //请求失败后，通知App更新状态，仅存储error会报错
        this.props.updataAppState({isLoading:false,err:error.message})
      }
    )
  }

  render(){
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          {/* 回调形式的ref */}
          <input ref={c => this.keyWordElement = c } type="text" placeholder="输入用户名搜索"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}